<template>
    <div class="search">
      <p @click="toCity"><van-icon name="location-o"/>{{$store.state.cityName}}</p>
      <div class="s" @click="toSearch">
        <van-search v-model="value" placeholder="请输入搜索演出关键词" />
      </div>
      <div  @click="toMine" style="padding-right:8px"><i class="iconfont icon-geren" style="font-size:25px;color:#7654ff;" ></i></div>
    </div>
    
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
    const value = ref("");
    const router = useRouter()
    const toCity = ()=>{
      router.push("/city")
    }
    const toSearch = ()=>{
      router.push("/show/search")
    }
    const toMine = ()=>{
      router.push("/mine")
    }
</script>
<style lang="scss" scoped>
.search {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  p{
    width: 50px;
    padding-left: 5px;
  }
  .s{
    flex: 1;
  }
}
</style>
